<template>
  <div class="list-view">
    <div
      class="list-view-item"
      :class="{ active: activeIndex == index }"
      v-for="(item, index) in list"
      :key="`list-view-item-${index}`"
      @click="handleClick(item, index)"
    >
      <!--
        作用域插槽
        <template #title="{row}"></template>
      -->
      <slot name="title" v-bind:row="item">
        {{ item.title }}
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListView',
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    clickRow: {
      type: Function,
      default: (item, index) => {}
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    handleClick(item, index) {
      this.activeIndex = index
      this.clickRow(item, index)
    }
  }
}
</script>

<style scoped></style>
